<template>
  <div>
    <!-- 数据字典类型列表表格 -->
    <TableContainer :page-info="pageInfo" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      <template #btnLeft>
        <el-button type="primary" @click="handleAdd">
          <el-icon>
            <Plus />
          </el-icon>
          新增字典项
        </el-button>
      </template>
      <el-table :data="tableData">
        <el-table-column v-for="column in gridOptions.columns" v-bind="{ ...column, ...$attrs }" :key="column.prop">
          <template #default="{ row }">
            <div class="w-full flex items-center justify-center" v-if="column.slots === 'controls'">
              <el-button link type="primary" @click.stop="handleEdit(row)">
                <el-icon>
                  <EditPen />
                </el-icon>
                修改
              </el-button>
              <el-button link type="danger" @click.stop="handleDelete(row)">
                <el-icon>
                  <Delete />
                </el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </TableContainer>
  </div>
  <!-- 新增/修改字典的弹窗 -->
  <dict-data-add ref="addDialog" @close="getList"></dict-data-add>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import DictDataAdd from "@/views/system/dict/component/DictDataAdd.vue";
import { useComponentRef } from "@/hooks/useComponentRef";
import { Dict } from "@/api/interface/dict";
import { getDictDataList, removeDictData } from "@/api/modules/dict";
import { ElMessage } from "element-plus";
import TableContainer from "@/components/TableContainer/index.vue";
import { useTableConfig } from "@/hooks/useTable";
import { TPager } from "@/typings/global";

const tableData = ref<Dict.IDictData[]>([]);
const addDialog = useComponentRef(DictDataAdd);

const props = defineProps<{ dictType: Dict.IDictType }>();

watch(
  () => props.dictType,
  () => getList()
);

const { gridOptions } = useTableConfig({
  columns: [
    { prop: "dictLabel", label: "标签名" },
    { prop: "dictValue", label: "数据值" },
    { prop: "dictType", label: "字典类型" },
    { prop: "dictRemark", label: "描述" },
    { prop: "dictSort", label: "排序", width: 80 }
  ]
});

const pageInfo = reactive<TPager>({
  current: 1,
  pageSize: 10,
  total: 0
});

const getList = async () => {
  if (!props.dictType || !props.dictType.id) return;
  try {
    const { data } = await getDictDataList(+props.dictType.id, pageInfo.current, pageInfo.pageSize);
    tableData.value = data.records || [];
    pageInfo.total = data.pager?.total || 0;
  } catch (e) {
    console.log(e);
  }
};

const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
  pageInfo.current = 1;
  getList();
};
const handleCurrentChange = (current: number) => {
  pageInfo.current = current;
  getList();
};

const handleAdd = () => {
  addDialog.value?.openDialog("add", { dictTypeId: props.dictType.id, dictType: props.dictType.dictCode });
};

const handleEdit = (row: Dict.IDictData) => {
  addDialog.value?.openDialog("edit", row);
};

const handleDelete = async (row: Dict.IDictData) => {
  try {
    await removeDictData(row.id);
    ElMessage.success("删除成功");
    await getList();
  } catch (e) {
    ElMessage.error("删除失败");
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
